import React from 'react';
import { Box, Typography } from '@mui/material';
import PlayArrowOutlinedIcon from '@mui/icons-material/PlayArrowOutlined';

// eslint-disable-next-line no-unused-vars
export const SetupStepsSection = ({ darkMode = false, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => {
  return (
    <Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <PlayArrowOutlinedIcon sx={{ ...iconSx, color: 'white' }} />
        <Typography sx={{ ...largeHeaderSx, color: 'white' }}>
          Our Three-Step Launch Process
        </Typography>
      </Box>
      
      <Typography sx={{ ...listItemSx, color: 'white' }}>
        Select your preferred stack and go from zero to production in minutes.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr 1fr' } }}>
        <Box>
          <Typography sx={{ ...smallHeaderSx, color: 'white' }} gutterBottom>
            1. Clone
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            Get full source code access for complete customization to your requirements.
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • npm install
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • react@18 and react-dom@18
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • Choose Node or Go backend
          </Typography>
        </Box>
        
        <Box>
          <Typography sx={{ ...smallHeaderSx, color: 'white' }} gutterBottom>
            2. Configure
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            5-minute setup process with clear documentation and environment configuration.
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • Set Stripe API keys
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • Configure MongoDB connection
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • Set email service settings
          </Typography>
        </Box>
        
        <Box>
          <Typography sx={{ ...smallHeaderSx, color: 'white' }} gutterBottom>
            3. Build
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            Deploy your application and extend with custom features for your business case.
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • npm start
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • pm2 start npm --name development -- run start
          </Typography>
          <Typography sx={{ ...listItemSx, color: 'white' }}>
            • Add your own business logic
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};